<template>
  <div class="app-container">
    <div v-if="userProfile">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user-profile="userProfile" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <div slot="header">
              <span>基本资料</span>
            </div>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基本资料" name="basicInfo">

                <basic-info :user-profile="userProfile" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPassword">
                <change-password v-if="activeTab === 'resetPassword'" />

              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>

import UserCard from './components/UserCard'
import BasicInfo from './components/BasicInfo'
import ChangePassword from './components/ChangePassword'
import api from '@/api/sys-user'

export default {
  name: 'Profile',
  components: { UserCard, BasicInfo, ChangePassword },
  data() {
    return {
      userProfile: {},
      activeTab: 'basicInfo'
    }
  },
  created() {

  },
  mounted() {
    this.getUserProfile()
  },
  methods: {
    getUserProfile() {
      api.userProfile().then(res => {
        this.userProfile = res.data
      })
    }
  }
}
</script>

